import React from 'react';
import { clsx } from 'clsx';
import { useResponsive } from '../../hooks/useResponsive';

interface ResponsiveContainerProps {
  children: React.ReactNode;
  className?: string;
  maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
  padding?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
  center?: boolean;
}

const ResponsiveContainer: React.FC<ResponsiveContainerProps> = ({
  children,
  className,
  maxWidth = 'xl',
  padding = 'md',
  center = true
}) => {
  const { isMobile, isTablet } = useResponsive();

  const maxWidthClasses = {
    sm: 'max-w-2xl',
    md: 'max-w-4xl',
    lg: 'max-w-6xl',
    xl: 'max-w-7xl',
    '2xl': 'max-w-8xl',
    full: 'max-w-full'
  };

  const paddingClasses = {
    none: '',
    sm: isMobile ? 'px-4 py-2' : 'px-6 py-4',
    md: isMobile ? 'px-4 py-4' : isTablet ? 'px-6 py-6' : 'px-8 py-8',
    lg: isMobile ? 'px-6 py-6' : isTablet ? 'px-8 py-8' : 'px-12 py-12',
    xl: isMobile ? 'px-6 py-8' : isTablet ? 'px-10 py-10' : 'px-16 py-16'
  };

  return (
    <div className={clsx(
      maxWidthClasses[maxWidth],
      paddingClasses[padding],
      center && 'mx-auto',
      className
    )}>
      {children}
    </div>
  );
};

export default ResponsiveContainer;

// 响应式网格组件
interface ResponsiveGridProps {
  children: React.ReactNode;
  className?: string;
  cols?: number;
  gap?: number;
}

export const ResponsiveGrid: React.FC<ResponsiveGridProps> = ({
  children,
  className,
  cols = 3,
  gap = 6
}) => {
  return (
    <div className={clsx(
      'grid',
      `grid-cols-1`,
      `sm:grid-cols-2`,
      `md:grid-cols-${Math.min(cols, 3)}`,
      `lg:grid-cols-${cols}`,
      `gap-${gap}`,
      className
    )}>
      {children}
    </div>
  );
};

// 响应式文本组件
interface ResponsiveTextProps {
  children: React.ReactNode;
  className?: string;
  as?: keyof JSX.IntrinsicElements;
  size?: string | {
    xs?: string;
    sm?: string;
    md?: string;
    lg?: string;
  };
  weight?: 'normal' | 'medium' | 'semibold' | 'bold';
  color?: string;
  style?: React.CSSProperties;
}

export const ResponsiveText: React.FC<ResponsiveTextProps> = ({
  children,
  className,
  as: Component = 'div',
  size = { xs: 'text-sm', sm: 'text-base', md: 'text-lg', lg: 'text-xl' },
  weight = 'normal',
  color = 'text-gray-900',
  style
}) => {
  const weightClasses = {
    normal: 'font-normal',
    medium: 'font-medium',
    semibold: 'font-semibold',
    bold: 'font-bold'
  };

  // 处理简单字符串size或复杂对象size
  const getSizeClasses = () => {
    if (typeof size === 'string') {
      return size;
    }
    return clsx(
      size.xs,
      size.sm && `sm:${size.sm}`,
      size.md && `md:${size.md}`,
      size.lg && `lg:${size.lg}`
    );
  };

  return (
    <Component 
      className={clsx(
        getSizeClasses(),
        weightClasses[weight],
        color,
        className
      )}
      style={style}
    >
      {children}
    </Component>
  );
};

// 响应式间距组件
interface ResponsiveSpacingProps {
  children: React.ReactNode;
  className?: string;
  margin?: {
    xs?: string;
    sm?: string;
    md?: string;
    lg?: string;
  };
  padding?: {
    xs?: string;
    sm?: string;
    md?: string;
    lg?: string;
  };
}

export const ResponsiveSpacing: React.FC<ResponsiveSpacingProps> = ({
  children,
  className,
  margin,
  padding
}) => {
  const getSpacingClasses = () => {
    const classes = [];
    
    if (margin) {
      if (margin.xs) classes.push(margin.xs);
      if (margin.sm) classes.push(`sm:${margin.sm}`);
      if (margin.md) classes.push(`md:${margin.md}`);
      if (margin.lg) classes.push(`lg:${margin.lg}`);
    }
    
    if (padding) {
      if (padding.xs) classes.push(padding.xs);
      if (padding.sm) classes.push(`sm:${padding.sm}`);
      if (padding.md) classes.push(`md:${padding.md}`);
      if (padding.lg) classes.push(`lg:${padding.lg}`);
    }
    
    return classes.join(' ');
  };

  return (
    <div className={clsx(
      getSpacingClasses(),
      className
    )}>
      {children}
    </div>
  );
};